<!DOCTYPE html>
<html>

<head>
    <meta charset="utf8">
    <title>表单输入</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <input v-model="text_field">
        <p>文本框内容为:{{text_field}}</p>
        <textarea v-model="text_area" aria-valuemax="10"></textarea>
        <p style="white-space: pre-line;">多行文本内容为:{{text_area}}</p>
        <!-- 单选框 复选框 可以与布尔值绑定 -->
        <input type="checkbox" value="吃饭" v-model="check_box">
        <p>{{check_box}}</p>
        <!-- 复选框和复选框与数组绑定起来,如果选中数组里会有input的value如果没有选中数组内对应的值会被删除 -->
        <input type="checkbox" value="足球" v-model="check_list">足球
        <input type="checkbox" value="排球" v-model="check_list">排球
        <input type="checkbox" value="篮球" v-model="check_list">篮球
        <p>{{check_list}}</p>
        <!-- 将一组单选框与数组绑定可实现单选+获取选择值 -->
        <input type="radio" value="男" v-model="check_radio">男
        <input type="radio" value="女" v-model="check_radio">女
        <p>{{check_radio}}</p>
        <!-- 选择列表可以与数组绑定 -->
        <select v-model="select">
            <option>male</option>
            <option>female</option>
        </select>
        <p>{{select}}</p>
        <!-- 多选 -->
        <select multiple v-model="select_multiple">
            <option>male</option>
            <option>female</option>
            <option>other</option>
        </select>
        <p>{{select_multiple}}</p>
        <!-- 两个常用的修饰符 lazy trim -->
        <!-- lazy 懒加载 -->
        <input v-model.lazy="lazy">
        <p>{{lazy}}</p>
        <input v-model.trim="trim">
        <!-- trim 去除首尾空格 -->
        <p>{{trim}}</p>
        <!-- 可以一起使用 -->
        <input v-model.trim.lazy="trim_lazy">
        <p>{{trim_lazy}}</p>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                text_field: "",
                text_area: "",
                check_box: false,
                check_list: [],
                check_radio: [],
                select: [],
                select_multiple: [],
                lazy: "",
                trim: "",
                trim_lazy: "",
            }
        },
        methods: {

        },
    }
    let instance = Vue.createApp(app).mount("#myapp");
</script>

</html>